<template>
	<view class="contianer">
		<view>
			<top-bar>
				<template #left>
					<image src="../../static/images/login/back.png" @tap="back" style="width: 44rpx;height: 44rpx;">
					</image>
				</template>
				<template #center>
					<text style="font-size: 40rpx;">人文</text>
				</template>
				<template #right>
					<view class="more" @tap="more()">
						<image src="../../static/images/gallery/more.png" mode=""></image>
					</view>
				</template>
			</top-bar>
			<swiper style="height: 90vh;">
				<swiper-item>
					<view class="swiper-item">
						<view class="main">
							<view class="photo" :animation="photo_a">
								<image :src="user.imgrul"></image>
							</view>
							<view class="name">昵称：{{user.name}}</view>
							<view class="memo" v-if="user.explain">宣：{{user.explain}}</view>
							<view class="memo" v-else>这个人很懒，什么也没留下</view>
							<!-- 右滑箭头 -->
							<!-- <view class="main-arrow">
								<image src="../../static/images/login/back.png" mode=""></image> -->
							<!-- </view> -->
							<view class="btn" v-if="relationship=='stranger'">
								<!-- 自己点击自己的头像，下面btn为透明不可见。点击好用头像显示发消息框。如果不是好友那么右上角没有详情 -->
								<!-- 点击添加 跳转发送请求页面 -->
								<view class="btn_add" @tap="addFriendAnimation()">加为好友</view>
							</view>
							<view class="btn" v-else-if="relationship=='friend'">
								<!-- 自己点击自己的头像，下面btn为透明不可见。点击好用头像显示发消息框。如果不是好友那么右上角没有详情 -->
								<!-- 点击添加 跳转发送请求页面 -->
								<view class="btn_add btn_chat" @tap="chat()">发消息</view>
							</view>
							<view class="btn" v-else-if="relationship=='self'">
								<!-- 自己点击自己的头像，下面btn为透明不可见。点击好用头像显示发消息框。如果不是好友那么右上角没有详情 -->
								<!-- 点击添加 跳转发送请求页面 -->
								<view class="btn_self">
									<view class="" @tap="goPostcard">名片</view>
									<!-- <view class="">唠唠</view> -->
								</view>
							</view>

						</view>
					</view>
				</swiper-item>

			</swiper>


			<view class="add_friend" :animation="add_friend_a" v-if="relationship=='stranger'">
				<view class="add_main">

					<view class="add_name">{{user.name}}</view>
					<view class="textarea">
						<textarea class="reqtext" v-model="reqMsg" id="" cols="30" rows="10" maxlength="120"></textarea>
					</view>
					<view class="req_btn">
						<!-- 自己点击自己的头像，下面btn为透明不可见。点击好用头像显示发消息框。如果不是好友那么右上角没有详情 -->
						<!-- 点击添加 跳转发送请求页面 -->
						<view class="req_cansel" @tap="addFriendAnimation()">取消</view>
						<view class="req_msg" @tap="req_msg()">添加好友</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import util from "../../commons/js/util.js"
	import {
		RuntimeServerUrl
	} from "../../commons/getRuntimeEnv.js"
	import {
		hasRelationship
	} from "../../api/register/index.js"
	export default {
		data() {
			return {
				//是否是好友关系 展示自己的内容 或者是陌生人的信息
				//更具请求结果 通过一个计算属性去设置
				relationship: ['self', 'friend', 'stranger'],
				user: {},
				friendId: '',
				isAddFriend: false,
				reqMsg: '你好，我是~',
				add_friend_a: {},
				photo_a: {},

			}
		},
		onShow() {
			//更具userid重新调用获取用户信息展示
			util.request({
				url: "/user/detail",
				method: "POST",
				data: {
					id: this.userid
				}
			}).then(res => {
				//显示头像 和 签名 
				let {
					result
				} = res.data
				console.log(result, "userinfo");
				this.user.explain = result.explain
				this.user.imgrul = RuntimeServerUrl + result.imgrul
			})
		},
		onLoad(option) {
			let userInfo = uni.getStorageSync("userInfo")

			//点击用户头像需要传递一个id到此页面，通过id从后端拿到对应的数据渲染
			//通过id 获取用户详情数据 
			this.userid = userInfo._id;
			this.friendId = option.id


			//先确定两个id的关系
			this.existRelationship(this.userid, this.friendId)


			//通过url传递的id去查询图片 如果是用户自己那么不需要请求查询
			if (this.relationship == "self" && userInfo) {
				this.user = Object.assign({}, userInfo)
			} else {
				this.getExhibition(this.friendId)
			}
			//如果相等表示 进入自己的介绍页面

			// console.log(this.friendId,'this.user');
		},
		methods: {
			async existRelationship(uid, fid) {
				//检查两个id否存在 用户关系
				//如果传入的id是相同的 进入自己的展示页面 返回
				if (uid === fid) {
					this.relationship = "self"
					return;
				}
				//如果两个id不相同 请求服务器
				let {
					data
				} = await hasRelationship({
					uid,
					fid
				})
				//返回200 表示是好友关系
				if (data.status == 200) {
					//是好友 应该显示去聊天
					this.relationship = "friend"
				} else {
					//表名是陌生人
					this.relationship = "stranger"
				}
			},
			// 通过传入的id，从本地缓存数据中找出对应的 数据并且渲染
			async getExhibition(id) {
				let {
					data
				} = await util.request({
					url: "/user/detail",
					method: "post",
					data: {
						id,
					}
				})
				data.result.imgrul = RuntimeServerUrl + data.result.imgrul
				// data.result.explain='dfgsgfd'
				data.result.explain = data.result.explain || ''
				this.user = data.result
				// console.log(this.user);
			},
			back() {
				uni.navigateBack()
			},
			goPostcard() {
				uni.navigateTo({
					url: "/pages/postcard/postcard"
				})
			},
			chat(id, index) {
				uni.navigateTo({
					url: `/pages/cheat/cheat?id=${this.friendId}`
				})

				// clearUnreadMsgApi(this.userid, id).then(res => {
				// 	console.log("清空未读消,成功");
				// }).catch(err => {
				// 	throw new Error(err)
				// })
			},
			more() {
				uni.navigateTo({
					url: `/pages/detail/detail?id=${this.friendId}`
				})
			},
			req_cansel() {
				this.cancel()
			},
			req_msg() {
				// 发送好友请求 
				util.request({
					url: '/friend/applyfirend',
					method: "POST",
					data: {
						uid: this.userid,
						fid: this.friendId,
						msg: this.reqMsg
					}
				}).then(res => {
					// console.log(res,'');
					if (res.data.status == 200) {
						uni.showToast({
							title: '请求发送成功',
							icon: 'none',
							duration: 1000
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 800)
					} else {

					}
				})
			},
			request() {
				this.isAddFriend = !this.isAddFriend
			},
			// 添加好友动画

			addFriendAnimation() {
				this.isAddFriend = !this.isAddFriend
				var animation1 = uni.createAnimation({
					//持续时间
					duration: 300,
					//动画方式
					timingFunction: 'ease'
				})
				var animation3 = uni.createAnimation({
					//持续时间
					duration: 300,
					//动画方式
					timingFunction: 'ease'
				})
				//头像动画
				var animation2 = uni.createAnimation({
					//持续时间
					duration: 300,
					//动画方式
					timingFunction: 'ease-out'
				})
				var animation4 = uni.createAnimation({
					//持续时间
					duration: 300,
					//动画方式
					timingFunction: 'ease-out'
				})
				if (this.isAddFriend) {
					animation1.bottom(-20).step()
					//动画执行绑定到 元素上
					this.add_friend_a = animation1.export()

					animation2.scale(0.5).translateY(-220).step()
					this.photo_a = animation2.export()
				} else {

					animation3.bottom(-1000).step()
					this.add_friend_a = animation3.export()
					animation4.scale(1).translateY(0).step()
					this.photo_a = animation4.export()
					// this.isAddFriend=!this.isAddFriend

				}

			}
		}
	}
</script>

<style lang="scss">
	::v-deep .top-bar {
		background-color: #ffffff00;
	}

	//按钮样式
	.btn {
		position: absolute;
		// right: 80rpx;
		bottom: 88rpx;
		height: 88rpx;
		width: 600rpx;

		.btn_self {
			display: flex;
			justify-content: space-around;
			align-items: center;

			view {
				text-align: center;
				line-height: 88rpx;
				font-size: 40rpx;
				height: 88rpx;
				width: 40%;
				background: #83a1ff;
				color: white;
				border-radius: 10rpx;
				z-index: 9;
			}
		}

		.btn_add {
			// border: 1px solid red;
			text-align: center;
			line-height: 88rpx;
			font-size: 40rpx;
			// width: 342rpx;
			height: 88rpx;
			width: 100%;
			background: #FFE431;
			border-radius: 10rpx;
			z-index: 9;
		}

		.btn_chat {
			background: #4AAAFF;
			color: white;
		}

	}

	page {
		overflow: hidden;
		height: 100vh;
	}

	.contianer {
		padding-top: 88rpx;
		height: calc(100vh - var(--status-bar-height));


	}

	.top-bar {
		display: none;
		// 使用static取消定位
		position: static;
		display: flex;
		justify-content: space-between;
		align-items: center;
		// height: 88rpx;
		// border: 1px solid red;
		box-sizing: border-box;
		padding: 0 20rpx;

		.top-bar-left {
			padding-left: 0px;

			// border: 1px solid red;
			.back {
				width: 44rpx;
				height: 44rpx;

				image {
					width: 44rpx;
					height: 44rpx;
				}
			}
		}

		.top-bar-right {
			// border: 1px solid red;
			padding-right: 0;

			.more {
				image {
					width: 74rpx;
					height: 74rpx;
				}
			}
		}
	}

	.swiper-item {
		position: relative;
		height: 100%;
	}

	.main {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		/* padding-top: 164px; */
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);

		.main-arrow {
			height: 30px;
			width: 100%;
			text-align: right;
			transform: rotate(180deg);
			position: relative;

			image {
				position: absolute;
				left: 0;
				width: 20px;
				height: 20px;
			}

			// animation: heart 1s infinite;

		}

		@keyframes heart {

			0% {
				color: transparent;
			}

			100% {
				// color: black; 
				transform: translateX(40%) scale(1.2);
			}

			// 0% {
			// 	color: #4AAAFF;
			// }

			// 10% {
			// 	color: #A0F9FF;
			// }

			// 20% {
			// 	color: #C9F9F7;
			// }

			// 30% {
			// 	color: #F9F9F1;
			// }

			// 40% {
			// 	color: #F9F8E6;
			// }

			// 50% {
			// 	color: #F8F8E7;
			// }

			// 60% {
			// 	color: #F9F9D8;
			// }

			// 70% {
			// 	color: #F9D8F9;
			// }

			// 80% {
			// 	color: #F8D8F9;
			// }

			// 90% {
			// 	color: #F9D9F9;
			// }

			// 100% {
			// 	color: #F9D9F9;
			// }

		}

		.photo {
			image {
				width: 400rpx;
				height: 400rpx;
				border: 3px solid #FFFFFF;
				border-radius: 48rpx;
				// z-index: 12;
			}
		}

		.name {
			min-height: 88rpx;
			max-height: 180rpx;
			text-align: center;
			font-size: 40rpx;
			color: #272832;
			letter-spacing: -0.89rpx;
			z-index: 9;
		}

		.memo {
			width: 600rpx;
			min-height: 160rpx;
			max-height: 180rpx;
			text-align: center;
			font-size: 30rpx;
			color: #272832;
			line-height: 48rpx;
			font-weight: 200;
			z-index: 9;
		}
	}

	.add_friend {
		position: fixed;
		box-sizing: border-box;
		bottom: -1000rpx;
		background-color: white;
		z-index: 11;
		width: 100%;

		.add_main {
			z-index: 10;
			display: flex;
			flex-direction: column;
			justify-content: center;
			height: 600rpx;

			.add_name {
				background-color: #FFFFFF;
				// width: 100%;
				height: 74rpx;
				// padding-left: 100rpx;
				text-align: center;
				font-size: 52rpx;
				color: #272832;
				font-weight: 400;
				border-top-right-radius: 40rpx;
				border-top-left-radius: 40rpx;
			}

			.textarea {
				width: 100%;
				background-color: #FFFFFF;
				height: 300rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.reqtext {
					width: 650rpx;
					padding: 20rpx;
					margin: 0 auto;
					font-size: 36rpx;
					height: 60%;
					background: #F3F4F6;
					border-radius: 20rpx;
				}
			}

			.req_btn {
				display: flex;
				background-color: #FFF;
				justify-content: space-around;

				.req_cansel {
					// border: 1px solid red;
					text-align: center;
					line-height: 88rpx;
					font-size: 40rpx;
					// width: 342rpx;
					height: 88rpx;
					width: 20%;
					background: rgba(39, 40, 50, 0.10);
					;
					border-radius: 10rpx;
					z-index: 9;
				}

				.req_msg {
					text-align: center;
					line-height: 88rpx;
					font-size: 40rpx;
					// width: 342rpx;
					height: 88rpx;
					width: 70%;
					background: #FFE431;
					border-radius: 10rpx;
					z-index: 9;
				}
			}
		}
	}

	.reqcontianer {
		// height: 1000px;
	}
</style>